import { useParams } from "react-router-dom"
import style from "./index.module.css"
import { PageTitle } from "../../compnents/Title"
import { IssueData } from "../../Types/Api/issue"
import { useEffect, useState } from "react"
import { reqGetIssueById } from "../../api/issue"
import { reqGetUserById } from "../../api/user"
import { User } from "../../Types/Api/user"
import { Discuss } from "../../compnents/Discuss"

export const IssueDetail = () => {
  const params = useParams()
  // 处理页面中issue展示
  const [issue, setIssue] = useState<IssueData>()
  const [user, setUser] = useState<User>()
  const getIssueById = async () => {
    const { data } = await reqGetIssueById(params.id!)
    setIssue(data)
    const { data: user } = await reqGetUserById(data.userId)
    setUser(user)
  }
  useEffect(() => {
    getIssueById()
  }, [])
  return (
    <div className={style.wrapper}>
      {/* 标题 */}
      <PageTitle title="问题详情"></PageTitle>
      {/* 详情信息 */}
      <div className={style.issueDetail}>
        {/* 标题 */}
        <div className={style.issueTitle}>{issue?.issueTitle}</div>
        {/* 用户信息 */}
        <div className={style.userInfo}>
          <img src={import.meta.env.VITE_APP_BASE_SERVICE + user?.avatar} />
          <div>{user?.nickname}</div>
          <div>
            发布于：{new Date(issue ? +issue.issueDate : 0).toLocaleString()}
          </div>
        </div>
        {/* 内容 */}
        <div
          className={style.issue}
          dangerouslySetInnerHTML={{ __html: issue?.issueContent || "" }}
        ></div>
      </div>
      {/* 评论 */}
      {/* 当前评论 */}
      {/* 组合：讨论 */}
      {issue && <Discuss issueId={issue._id} typeId={issue.typeId}></Discuss>}
    </div>
  )
}
